<template>
  <view>
    <s-layout
      title="我的订单"
      :bgStyle="{ color: '#F1F1F1' }"
    >
      <su-sticky bgColor="#fff">
        <view
          class="bg-white font-w ss-p-y-40 ss-p-x-28"
          style="font-size: 44rpx;"
        >{{filterStutes(state?.params?.status)}}</view>
      </su-sticky>
      <view class="ss-p-20 ss-p-b-40">
        <view class="ss-r-20 bg-white ss-p-y-28 ss-p-x-20">
          <view class="font-1 font-w">
            预计送达时间
          </view>
          <view class="font-1 font-w ss-m-t-14 ss-p-b-20">
            {{state?.params?.delivery?.set_delivery_begin_time||'-'}}~{{state?.params?.delivery?.set_delivery_end_time||'-'}}
          </view>
          <view class="line ss-m-b-24"></view>
          <view class="handleBox">
            <view class="handleBox-item">
              <image
                :src="sheep.$url.cdn('/static/merchant/shop/takeout-detail-1.png')"
                mode="aspectFill"
              ></image>
              <view class="font-1 font-w ss-m-t-6">申请退款</view>
            </view>
            <view class="handleBox-item">
              <image
                :src="sheep.$url.cdn('/static/merchant/shop/takeout-detail-2.png')"
                mode="aspectFill"
              ></image>
              <view class="font-1 font-w ss-m-t-6 color">联系商家</view>
            </view>
            <view class="handleBox-item">
              <image
                :src="sheep.$url.cdn('/static/merchant/shop/takeout-detail-3.png')"
                mode="aspectFill"
              ></image>
              <view class="font-1 font-w ss-m-t-6 color">联系骑手</view>
            </view>
            <view class="handleBox-item">
              <image
                :src="sheep.$url.cdn('/static/merchant/shop/takeout-detail-4.png')"
                mode="aspectFill"
              ></image>
              <view class="font-1 font-w ss-m-t-6">修改地址</view>
            </view>
          </view>
        </view>
        <!-- 商品信息 -->
        <view class="ss-r-20 bg-white ss-p-20 ss-m-t-20">
          <view class="font-2 font-w ss-line-1">{{state?.params?.store?.name}}</view>
          <view class="line ss-m-t-10"></view>
          <!-- 商品列表 -->
          <template
            v-for="(item,index) in state?.params?.item"
            :key="index"
          >
            <view
              v-if="index<3||state.showMore"
              class="ss-flex justify-between ss-p-y-36"
            >
              <image
                style="width:100rpx;height:100rpx"
                :src="item.goods_image"
                mode="aspectFill"
              ></image>
              <view
                class="ss-m-l-20"
                style="flex:1"
              >
                <view class="ss-flex justify-between font-2">
                  <view
                    class="ss-line-1"
                    style="width:424rpx "
                  >{{item.goods_title}}</view>
                  <view>￥{{Number(item.goods_price)*Number(item.goods_num)}}</view>
                </view>
                <view
                  class="font-1"
                  style="color:#858687"
                >
                  <view class="ss-line-1 ss-m-y-10">{{item.goods_sku_text}}</view>
                  <view>x{{item.goods_num}}</view>
                </view>
              </view>
            </view>
          </template>
          <view
            v-if="state?.params?.item?.length>3"
            class="ss-flex justify-center ss-m-t-10"
            @tap="more"
          >
            {{state.showMore?'收起':'查看更多'}}
            <uni-icons
              class="icons ss-m-l-10"
              :class="{'rotate':state.showMore}"
              type="down"
              size="16"
            ></uni-icons>
          </view>

          <view class="ss-flex justify-between font-1 ss-m-t-36">
            <view class="gray">配送费</view>
            <view>￥{{state?.params?.dispatch_amount}}</view>
          </view>
          <view class="ss-flex justify-between font-1 ss-m-t-20">
            <view class="gray">打包费</view>
            <view>￥{{state?.params?.pack_fee}}</view>
          </view>

          <view class="text-right font-2 ss-m-t-60 font-w">
            合计 ￥<span
              class="font-3"
              style="color:#FA5151"
            >{{state?.params?.order_amount}}</span>
          </view>

        </view>

        <!-- 配送信息 -->
        <view class="ss-r-20 bg-white ss-m-t-20">
          <view class="font-2 font-w ss-p-20">配送信息</view>
          <view class="line"></view>
          <view class="ss-p-20">
            <view class="ss-flex justify-between font-1 ss-m-t-36">
              <view class="gray">期望时间</view>
              <view class="font-w">立即配送</view>
            </view>
            <view class="ss-flex justify-between font-1 ss-m-t-20 align-start">
              <view class="gray">配送地址</view>
              <view
                class="text-right font-w"
                style="width:480rpx;word-break: break-all"
              >{{state?.params?.address?.address||'-'}}</view>
            </view>
            <view class="text-right ss-m-t-20 font-w">{{state?.params?.address?.consignee}}</view>
          </view>
        </view>
        <!-- 订单信息 -->
        <view class="ss-r-20 bg-white ss-m-t-20">
          <view class="font-2 font-w ss-p-20">订单信息</view>
          <view class="line"></view>
          <view class="ss-p-20">
            <view class="ss-flex justify-between font-1 ss-m-t-36">
              <view class="gray">订单号码</view>
              <view class="font-w">{{state?.params?.order_sn}}</view>
            </view>
            <view class="ss-flex justify-between font-1 ss-m-t-36">
              <view class="gray">下单时间</view>
              <view class="font-w">{{state?.params?.create_time}}</view>
            </view>
            <view class="ss-flex justify-between font-1 ss-m-t-36">
              <view class="gray">支付方式</view>
              <view class="font-w">在线支付</view>
            </view>
          </view>
        </view>
      </view>

    </s-layout>
  </view>
</template>

<script setup>
//附近门店列表页
import {
  computed,
  reactive,
  onBeforeMount,
  ref
} from 'vue';
import {
  onLoad,
  onReachBottom,
  onPageScroll,
  onReady
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import _ from 'lodash'
import assNavbar from '@/components/ass-navbar.vue'
import {
  queryToParams
} from '@/sheep/helper/index.js';
const sys_navBar = sheep.$platform.navbar;//标题栏高度
const windowHeight = sheep.$platform.device.windowHeight; // 获得窗口高度

const state = reactive({
  list: [{}, {}, {}, {}, {}],
  page: 0,
  last_page: 1,
  showMore: false,
  params: {}
})
const filterStutes = (val) => {
  switch (val) {
    case 'closed':
      return '交易关闭'
    case 'cancel':
      return '已取消'
    case 'unpaid':
      return '未支付'
    case 'paid':
      return '已支付'
    case 'completed':
      return '已完成'
    case 'pending':
      return '待定'
    default:
      return '-'
  }
}
// 查看更多或收起
function more () {
  state.showMore = !state.showMore

}
const getDetail = (order_sn) => {
  sheep.$api.takeout.createOrderDetail(order_sn).then(({ error, data }) => {
    if (error == 0) {
      state.params = data
    }
  })
}
onLoad(async (options) => {
  getDetail(options.order_sn)
})
</script>


<style lang="scss" scoped>
view {
  box-sizing: border-box;
  font-family: Source Han Sans;
}
.line {
  background: #ececec;
  height: 2rpx;
}
.handleBox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  .handleBox-item {
    text-align: center;
    image {
      width: 50rpx;
      height: 50rpx;
    }
    .color {
      color: #ff8813;
    }
  }
}
.icons {
  transition-property: all;
  transition-duration: 0.3s;
  display: block;
}
.rotate {
  transform: rotate(180deg);
}
.gray {
  color: #858687;
}
</style>
